<template>
    <!--   -->
    <div>
        <div class="conttbox">
            <div :class="objcontrol.dev_state == 1
                ? 'header_back3'
                : objcontrol.dev_state == 2
                    ? 'header_back'
                    : objcontrol.dev_state == 3
                        ? 'header_back2'
                        : 'header_back1'
                ">
                <div class="roomName">
                    <!-- <el-checkbox v-model="objcontrol.checked_box" @change="handleCentralSelect"></el-checkbox> -->
                    <span style="margin-left: 20px">{{ objcontrol.roomNum }}</span><span v-if="objcontrol.remark">-{{
                        objcontrol.remark
                    }}</span>
                </div>
                <div class="display_flex3 align-items"><span style="margin-right :20px;">
                        {{
                            objcontrol.dev_state == 1
                            ? "正常"
                            : objcontrol.dev_state == 2
                                ? "报警"
                                : objcontrol.dev_state == 3
                                    ? "离线"
                                    : ""
                        }}
                    </span>
                    <img class="air_icon" @click="handleRefresh" src="../assets/img/air/refresh.png" />
                </div>
            </div>
            <div v-if="objcontrol.dev_state == 1" :class="click_switch ? 'dev_boxback devbg' : ''"></div>
            <div class="all_icon1">
                <div class="display_flex3 justifycontent">
                    <div class="switchbtn">
                        <span style="margin-right: 10px">开关</span>
                        <el-switch v-model="objcontrol.runState" :before-change="() => handlePowerOperate()"
                            :active-value="2" :inactive-value="1" :disabled="dis_switch" active-color="#13ce66"
                            inactive-color="rgb(158 158 158)" />
                    </div>
                    <div class="auto-manual2" style="width:140px">
                        <el-select v-model="objcontrol.ctrlModel" placeholder="时控开关" @change="handleRulesSwitch"
                            :disabled="disSwitch">
                            <el-option v-for="item in RulesSwitchList" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="instrumentPanel" ref="instrumentPanel" style="width: 100%; height: 240px"></div>
                <div class="slider-demo-block">
                    <div class="fontSize14 color333 mr20 ">温度设置</div>
                    <div class="content-block1 handle-box1">
                        <span class="minimumtemp">
                            16℃
                        </span>
                        <!-- :marks="marks" -->
                        <el-slider v-model="objcontrol.tempSet" class="slider-block" :min="16" :max="30"
                            @change="handleSlider" :disabled="sd_disabled" />
                        <span class="maximumtemp">
                            30℃

                        </span>
                    </div>
                </div>
                <div class="slider-demo-block" style="height:52px;line-height:42px;margin-top:10px;">
                    <div class="fontSize14 color333 mr20">模式设置</div>
                    <div class="content-block1 handle-box1">
                        <div @click="handleCentralMode(1)">
                            <img class="air_icon" v-if="objcontrol.centralMode == 1" src="../assets/img/air/icon_on1.png" />
                            <img class="air_icon" v-else src="../assets/img/air/icon1.png" />
                            <div class="fontSize14">制冷</div>
                        </div>
                        <div @click="handleCentralMode(2)">
                            <img class="air_icon" v-if="objcontrol.centralMode == 2" src="../assets/img/air/icon_on2.png" />
                            <img class="air_icon" v-else src="../assets/img/air/icon2.png" />
                            <div class="fontSize14">除湿</div>
                        </div>
                        <div @click="handleCentralMode(4)">
                            <img class="air_icon" v-if="objcontrol.centralMode == 4" src="../assets/img/air/icon_on3.png" />
                            <img class="air_icon" v-else src="../assets/img/air/icon3.png" />
                            <div class="fontSize14">送风</div>
                        </div>
                        <div @click="handleCentralMode(5)">
                            <img class="air_icon" v-if="objcontrol.centralMode == 5" src="../assets/img/air/icon_on4.png" />
                            <img class="air_icon" v-else src="../assets/img/air/icon4.png" />
                            <div class="fontSize14">自动除湿</div>
                        </div>
                    </div>
                </div>
                <div class="slider-demo-block">
                    <div class="fontSize14 color333 mr20">风速设置</div>
                    <div class="content-block1 handle-box1">
                        <el-radio-group v-model="objcontrol.centralSpeed" class="ml-4" v-for="(item, index) in 6"
                            @change="handleCentralSpeed">
                            <el-radio :label="index" size="large">{{ index == 0 || null ? '自动' : index }}</el-radio>
                        </el-radio-group>
                    </div>
                </div>
                <div class="slider-demo-block">
                    <div class="fontSize14 color333 mr20">前后风向</div>
                    <div class="content-block2 display_flex3 align-items">
                        <el-radio-group v-model="objcontrol.centralWindDirL" class="ml-4" v-for="(item, index) in 7"
                            @change="handleCentralWindDirL">
                            <el-radio-button :label="index" size="large">{{ index == 0 || null ? '自动' : index
                            }}</el-radio-button>
                        </el-radio-group>
                    </div>
                </div>
                <div class="slider-demo-block">
                    <div class="fontSize14 color333 mr20">左右风向</div>
                    <div class="content-block2 display_flex3 align-items">
                        <el-radio-group v-model="objcontrol.centralWindDirT" class="ml-4" v-for="(item, index) in 7"
                            @change="handleCentralWindDirT">
                            <el-radio-button :label="index" size="large">{{ index == 0 || null ? '自动' : index
                            }}</el-radio-button>
                        </el-radio-group>
                    </div>
                </div>

                <!-- <i class="el-icon-remove-outline"></i> -->
                <div class="icon-box handle-box1 justifycontent">
                    <div class="auto-manual" style="width: 150px">
                        <el-select v-model="objcontrol.automaticRule" placeholder="时控规则" @change="handleRules($event)"
                            :disabled="operatePermission.AIR_MANAGE_UPDATE == false || operatePermission.AIR_CENTER_UPDATE == false">
                            <el-option v-for="item in RulesList" :key="item.id" :label="item.title" :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                    <!-- <i class="el-icon-s-order" @click="handleRunningLog(objcontrol)"></i>
                    <i class="el-icon-finished" @click="handleinfraredCtl(2, objcontrol, index)"></i>
                    <i class="el-icon-setting" @click="handleparameterSet(2, objcontrol, index)"></i> -->
                    <div style="margin-left: 30px;">
                        <i class="el-icon-edit" @click="handleAdd(objcontrol, index)"
                            v-if="operatePermission.AIR_MANAGE_UPDATE || operatePermission.AIR_CENTER_UPDATE"></i>
                        <i class="el-icon-delete" @click="handledelete"
                            v-if="operatePermission.AIR_MANAGE_DELETE || operatePermission.AIR_CENTER_UPDATE"></i>
                    </div>
                </div>
            </div>
        </div>
        <!-- <i class="el-icon-close" @click="handlecloseControl"></i> -->
        <addAir :editVisible="addPopup" v-if="addPopup" :RoomList="RoomList" @handleclose="handleclose"
            @handleclick="handleclickUpdate" :campusList="campusList" @handleChangeAreaCodeEdit="handleChangeAreaCodeEdit"
            @handleAreaCode="handleAreaCode" ref="refAddAir" :add_form="add_form" :isCentral="1"></addAir>
        <!-- 红外线控制 -->
        <!-- <infrared :editVisible="infraredCtl" v-if="infraredCtl" :airList="selectList" :add_from="add_from_infraredRay"
        @handleclose="handleclose" @handleclick="saveEditInfraredCtl" @handleAreaCode="handleAreaCode"></infrared> -->

        <!--基础参数设置  -->
        <!-- <basicsSet :editVisible="parameterSet" v-if="parameterSet" :airList="selectList" :add_form="add_from_parameter.value"
        @handleclose="handleclose" @handleclick="saveEditParameterSet"></basicsSet> -->
        <!--  运行时间日志-->
        <!-- <air-RunningLog v-if="runningLog" :airLogItem="airLogItem" :runningLog="runningLog"
        @handleclose="handleclose"></air-RunningLog> -->
    </div>
</template>
<script>
import { ref, onMounted, reactive, getCurrentInstance, nextTick } from "vue";
import addAir from "../components/addAir.vue";
import infrared from "../components/infrared.vue";
import basicsSet from "../components/basicsSet.vue";
import echartcurve from "../components/echart_curve.vue";
import * as echarts from "echarts";
import { ElMessage, ElMessageBox } from "element-plus";
import parsing from "../assets/js/parsing";
import { getinfluxData } from "../assets/js/getcampusList";
import api from "../api/api";
import airRunningLog from "../pages/deviceMgt/airRunningLog.vue";
import { useRoute, useRouter } from "vue-router";
var instrumentPanelOption = {
    // background: '#999999',
    grid: {
        left: '0%',
        bottom: '0%',
        top: "0%",
        // containLabel: true,
    },
    series: [
        {
            name: '',
            type: 'gauge',
            startAngle: 225,
            endAngle: -45,
            min: 0,
            max: 100,
            splitNumber: 5, //刻度数量
            radius: '60%',
            center: ['50%', '50%'],
            title: {
                show: true,
                offsetCenter: [0, 10], // x, y，单位px
                textStyle: {
                    color: '#333',
                    fontSize: 14,
                    lineHeight: 60,
                },
            },
            detail: {
                show: true,
                offsetCenter: [0, -15],
                color: '#999',
                fontSize: 12,
                formatter: function (value) {
                    return '{a|' + value + '℃}' + '  温度' + '{a|}';
                },
                rich: {
                    a: {
                        color: '#333',
                        fontSize: 18,
                        lineHeight: 40
                    }
                }
            },
            axisLine: {
                show: false,
                lineStyle: {
                    width: 0,
                    shadowBlur: 0,
                    color: [
                        [0, '#43A4F3'],
                        [1, '#999'],
                    ],
                },
            },
            axisTick: {
                show: true,
                lineStyle: {
                    color: 'auto',
                    width: 2,
                },
                length: 10,
                splitNumber: 6,
            },
            splitLine: {
                show: false,
                length: 10,
                lineStyle: {
                    color: 'auto',
                },
            },
            axisLabel: {
                show: false,
            },
            pointer: {
                //仪表盘指针
                show: 0,
                length: '60%',
                width: 2,
            },

            data: [
                {
                    name: '完成率',
                    value: 55,
                },
            ],
        },
    ],
};
export default {
    components: { addAir, infrared, basicsSet, echartcurve, airRunningLog },
    setup(props, context) {
        let { proxy } = getCurrentInstance();
        const router = useRouter()
        const objcontrol = context.attrs.objcontrol;
        console.log(objcontrol)
        const islist = context.attrs.islist;
        const RulesList = context.attrs.RulesList;
        // islist  1 为中央空调列表，2 空调管理
        if (islist != 2) {
            objcontrol.dev_state = parsing.getcentralAirdevstate(objcontrol);
        }
        objcontrol.devState = objcontrol.runState == 2 ? 1 : 0;
        // 获取校区
        const campusList = ref(context.attrs.campusList);
        const instrumentPanel = ref(null);
        const sliderValue = ref(20);
        const windSpeedRadio = ref(0);
        const frontBackRadio = ref(0);
        const leftRightRadio = ref(0);
        const click_switch = ref(false)
        onMounted(async () => {
            // 初始化
            let instrument = echarts.init(instrumentPanel.value);
            instrumentPanelOption.series[0].data[0].value = objcontrol.tempInfo;
            instrumentPanelOption.series[0].data[0].name = "湿度：" + objcontrol.humidity + "%RH";
            instrumentPanelOption.series[0].axisLine.lineStyle.color[0][0] = objcontrol.humidity || 0 / 100
            instrument.setOption(instrumentPanelOption);
            window.addEventListener("resize", function () {
                //自适应大小, 不用的话不会自适应大小。
                instrument.resize();
            });
        })
        const sd_disabled = ref(false)
        const handleSlider = (e) => {
            sd_disabled.value = true;

            objcontrol.setTemp = e;
            setValidpowerOperate();
            setTimeout(function () {
                sd_disabled.value = false;
            }, 3000)
        }
        // 时控规则操作
        const handleRules = (e) => {
            // console.log(e);
            api
                .postFormAPI(
                    "backup/airCondition/updateRule?id=" + objcontrol.id + "&ruleId=" + e,
                    {}
                )
                .then((res) => {
                    if (res.data.code == 1) {
                        ElMessage.success("设置成功！");
                        getRefresh(0, 4);
                    } else {
                        ElMessage.error(res.data.message);
                    }
                })
                .catch((err) => { });
        };
        // 刷新
        const handleRefresh = () => {
            getRefresh(1, 4);
            // api
            //     .getListAPI("backup/airConditionOperate/getShown?imei=" + objcontrol.imei + "&shunt=" + objcontrol.shunt, "", "GET")
            //     .then((res) => {
            //         objcontrol.ctrlModel = Number(res.data.data.ctrlModel);
            //         ctrlModel.value = Number(res.data.data.ctrlModel);
            //         objcontrol.dev_state = parsing.getcentralAirdevstate(res.data.data);
            //     });
        };
        const getRefresh = (ttype, isEvalua) => {
            // console.log(isEvalua)
            // isEvalua 判断是否重新赋值，2为是
            api
                .getListAPI(
                    "backup/airConditionOperate/getShownSync?imei=" +
                    objcontrol.imei +
                    "&shunt=" +
                    objcontrol.shunt,
                    "",
                    "GET"
                )
                .then((resobj) => {
                    console.log(resobj)
                    if (resobj.data.code == 1) {
                        if (ttype == 1) {
                            ElMessage.success("已刷新");
                        }
                        if (Number(isEvalua) > 3) {
                            // 红外 runState等于2 acState为1
                            // objcontrol.acState = resobj.data.data.runState == 2 ? 1 : 0;
                            // 运行状态 电源 :0:分闸状态 1:合闸供电状态但空调未运行2:空调运行中
                            objcontrol.runState = resobj.data.data.runState;
                            objcontrol.devState = objcontrol.runState == 2 ? 1 : 0;
                            //  活体感应 1-有人 0-无人
                            objcontrol.bodySensor = resobj.data.data.bodySensor;
                            //  0-夏季(制冷) 1-冬季(制热)
                            objcontrol.season = resobj.data.data.season;
                            //用电时长,单位 分钟
                            objcontrol.totalTime = resobj.data.data.totalTime;
                            //工作模式 1-制冷 2-抽湿 3-送风 4-制热
                            objcontrol.runMode = resobj.data.data.runMode;
                            //风速 0:自动 1:风速1 2:风速2 3:风速3
                            objcontrol.windSpeed = resobj.data.data.windSpeed;
                            //风向 null-不动(停止,没有指定风向) 0:自动 1-风向1 2-风向2 3-风向3 4-风向4
                            objcontrol.windDirect = resobj.data.data.windDirect;
                            // 室内温度,单位℃
                            objcontrol.tempInfo = resobj.data.data.tempInfo;
                            // 湿度,单位%RH
                            objcontrol.humidity = resobj.data.data.humidity;
                            //光照度
                            objcontrol.illu = resobj.data.data.illu;
                            // 温度
                            objcontrol.tempSet = resobj.data.data.tempSet;
                            //异常
                            objcontrol.alarming = resobj.data.data.alarming;
                            objcontrol.switchInfo = resobj.data.data.switchInfo;
                            objcontrol.ctrlModel = Number(resobj.data.data.ctrlModel);

                            objcontrol.lineId = resobj.data.data.lineId;
                            objcontrol.online = resobj.data.data.online;
                            objcontrol.innerNum = resobj.data.data.innerNum;
                            objcontrol.alarming = resobj.data.data.alarming;
                            objcontrol.centralSpeed = resobj.data.data.centralSpeed;
                            objcontrol.centralWindDirL = resobj.data.data.centralWindDirL;
                            objcontrol.centralWindDirT = resobj.data.data.centralWindDirT;
                            objcontrol.centralMode = resobj.data.data.centralMode;
                            objcontrol.dev_state = parsing.getcentralAirdevstate(res.data.data);
                        }
                    } else {
                        ElMessage.error(resobj.data.message);
                    }
                })
                .catch((err) => { });
        };
        const handleCentralSelect = (e) => {
            let item = {
                item: objcontrol,
                event: e,
            }
            context.emit("handleCentralSelect", item);
        }
        // 空调电源开关操作
        const dis_switch = ref(false);
        const handlePowerOperate = (item, index) => {
            dis_switch.value = true;
            // runState运行状态 电源 :0:分闸状态 1:合闸供电状态但空调未运行2:空调运行中
            if (objcontrol.runState == 2) {
                objcontrol.devState = 0;//合闸 --断电
            } else {
                objcontrol.devState = 1;//分闸---通电
            }
            return new Promise((resolve) => {
                setValidpowerOperate()
                return resolve(true)
            })
        };
        const terval = ref(null);
        const tervalTime = ref(0);
        const setValidpowerOperate = () => {
            // islist 1是中央空调列表进来的,2是空调管理面板
            if ((islist == 1 && !proxy.$operatePermission.operateObj().AIR_MANAGE_OPERATE) || (islist == 2 && !proxy.$operatePermission.operateObj().AIR_CENTER_OPERATE)) {
                ElMessage.error("暂无操作权限");
                return;
            }
            if (click_switch.value) {
                return;
            }
            click_switch.value = true;
            if (terval.value) {
                clearInterval(terval.value);
            }
            tervalTime.value = 1;
            terval.value = null;
            // return new Promise(function (resolve, reject) {
            api
                .postFormAPI("backup/airConditionOperate/workingOperateZH", {
                    "imei": objcontrol.imei,
                    "runState": objcontrol.devState,
                    "lineId": objcontrol.lineId,
                    "innerNum": objcontrol.innerNum,
                    "runMode": objcontrol.centralMode,
                    "setTemp": objcontrol.tempSet,
                    "windSpeed": objcontrol.centralSpeed,
                    "centralWindDirL": objcontrol.centralWindDirL,
                    "centralWindDirT": objcontrol.centralWindDirT
                })
                .then((res) => {
                    if (res.data.code == 1) {
                        // resolve(res.data);
                        terval.value = setInterval(function () {
                            console.log(tervalTime.value)
                            if (Number(tervalTime.value) == 2) {
                                ElMessage.success("设置成功！");
                            }
                            if (Number(tervalTime.value) > 3) {
                                clearInterval(terval.value);
                                tervalTime.value = 1;
                                terval.value = null;
                                click_switch.value = false;
                            }
                            getRefresh(0, tervalTime.value);
                            tervalTime.value++;
                        }, 3000 / tervalTime.value);
                    } else {
                        click_switch.value = false;
                        ElMessage.error(res.data.message);
                    }
                })
                .catch((err) => {
                    click_switch.value = false;
                });
            setTimeout(function () {
                dis_switch.value = false;
            }, 3000);
            // });
        }
        const handleCentralMode = (type) => {
            if (objcontrol.runState == 1) {
                ElMessage.error("空调未开启");
                return;
            }

            objcontrol.centralMode = type;
            setValidpowerOperate();

        }
        // 前后风向
        const handleCentralWindDirL = (e) => {
            if (objcontrol.runState == 1) {
                ElMessage.error("空调未开启");
                return;
            }

            objcontrol.centralWindDirL = e;
            setValidpowerOperate()

        }
        // 左右风向
        const handleCentralWindDirT = (e) => {
            if (objcontrol.runState == 1) {
                ElMessage.error("空调未开启");
                return;
            }

            objcontrol.centralWindDirT = e;
            setValidpowerOperate();

        }
        // 风速设置
        const handleCentralSpeed = (e) => {

            if (objcontrol.runState == 1) {
                ElMessage.error("空调未开启");
                return;
            }

            objcontrol.centralSpeed = e;
            setValidpowerOperate()

        }
        const addPopup = ref(false);
        const addObj = ref({});
        const add_form = reactive({
        });
        const handleAdd = () => {
            addPopup.value = true;
            if (objcontrol.regionId) {
                add_form.areaCode = objcontrol.areaCode.substring(0, 8);
                add_form.buildAreaCode = objcontrol.areaCode;
                proxy.$listExist(add_form.areaCode).then((res) => {
                    refAddAir.value.parent_category = res;
                });
            }
            if (objcontrol.id) {
                addObj.value = objcontrol;
                api
                    .getListAPI("backup/airCondition/detail?id=" + objcontrol.id, {})
                    .then((res) => {
                        if (res.data) {
                            let obj = res.data.data;
                            add_form.id = obj.id;
                            add_form.regionId = obj.regionId;
                            add_form.imei = obj.imei;
                            add_form.shunt = obj.shunt;
                            add_form.switchShunt = obj.switchShunt;
                            add_form.description = obj.description;
                            add_form.brandName = obj.brandName;
                            add_form.modelName = obj.modelName;
                            add_form.tempTop = obj.tempTop;
                            add_form.tempLowest = obj.tempLowest;
                            add_form.tempTop = obj.tempTop;
                            add_form.isCount = obj.isCount;
                            add_form.isOperate = obj.isOperate;
                        } else {
                            ElMessage.error(res.data.message);
                        }
                    })
                    .catch((err) => { });
            } else {
                addObj.value = {};
                add_form.id = null;
                add_form.regionId = null;
                add_form.imei = null;
                add_form.shunt = null;
                add_form.switchShunt = null;
                add_form.description = null;
                add_form.brandName = null;
                add_form.modelName = null;
                add_form.tempTop = null;
                add_form.tempLowest = null;
                add_form.tempTop = null;
                add_form.isCount = 1;
            }
            getRoomList();
        };
        const RoomList = ref([]);
        const getRoomList = () => {
            api
                .getListAPI("backup/region/list?areaCode=" + add_form.buildAreaCode, {})
                .then((res) => {
                    if (res.data.code == 1) {
                        RoomList.value = res.data.data;
                        refAddAir.value.RoomList = res.data.data;
                    } else {
                        ElMessage.error(res.data.message);
                    }
                    //数据处理
                })
                .catch((err) => {
                    console.log(err);
                });
        };
        const handleclose = (row) => {
            addPopup.value = row;
        };
        const refAddAir = ref();
        const handleAreaCode = (res) => {
            var index = "";
            if (res && res.length > 1) {
                index = res.length - 1;
                // query.queryAreaCode = res[index];
            }
            console.log(res[index]);
            if (res[index].length > 6) {
                proxy.$listExist(res[index]).then((res) => {
                    refAddAir.value.parent_category = res;
                });
            }
            add_form.regionId = null;
        };
        const handleChangeAreaCodeEdit = (res) => {
            if (res) {
                if (res && res.length > 1) {
                    var index = res.length - 1;
                    add_form.buildAreaCode = res[index];
                } else {
                    add_form.buildAreaCode = res[0];
                }
            }
            getRoomList();
        };
        // 确定添加
        const handleclickUpdate = (form, e) => {
            console.log(form)
            if (!form.regionId) {
                ElMessage.error("请选择房间号");
                return;
            } else if (!form.imei) {
                ElMessage.error("请输入设备");
                return;
            } else if (!form.shunt) {
                ElMessage.error("请输入分路号");
                return;
            }
            form.buildAreaCode = [form.buildAreaCode];
            api
                .postFormAPI("backup/airCondition/update", form)
                .then((res) => {
                    if (res.data.code == 1) {
                        ElMessage.success("修改成功！");
                        addPopup.value = false;
                        context.emit("handleclickUpdate");
                    } else {
                        ElMessage.error(res.data.message);
                    }
                })
                .catch((err) => { });
        };
        // 删除
        const handledelete = () => {
            context.emit("handledelete", objcontrol);
        };
        // 时控开关
        const disSwitch = ref(false);
        const handleRulesSwitch = (e) => {
            console.log(e)
            let ctrlModel = null;
            if ((islist == 1 && !proxy.$operatePermission.operateObj().AIR_MANAGE_OPERATE) || (islist == 2 && !proxy.$operatePermission.operateObj().AIR_CENTER_OPERATE)) {
                ElMessage.error("暂无操作权限");
                return;
            }
            disSwitch.value = true;
            // if (objcontrol.ctrlModel == 0) {
            //     ctrlModel = 1;
            // } else {
            //     ctrlModel = 0;
            // }
            // console.log(ctrlModel)
            api
                .postFormAPI("backup/airConditionOperate/ctrlModelZH", {
                    "imei": objcontrol.imei,
                    "shunt": objcontrol.shunt,
                    "ctrlModel": e
                })
                .then((res) => {
                    if (res.data.code == 1) {
                        ElMessage.success("设置成功");
                        tervalTime.value = 1;
                        terval.value = null;
                        getRefresh(0, 4);
                    } else {
                        ElMessage.error(res.data.message);
                    }
                })
                .catch((err) => { });
            setTimeout(function () {
                disSwitch.value = false;
            }, 3000)
        }
        return {
            objcontrol,
            instrumentPanel,
            sliderValue,
            windSpeedRadio,
            frontBackRadio,
            leftRightRadio,
            RulesList,
            dis_switch,
            addPopup,
            refAddAir,
            RoomList,
            add_form,
            campusList,
            disSwitch,
            sd_disabled,
            click_switch,
            operatePermission: proxy.$operatePermission.operateObj(),
            RulesSwitchList: [{
                value: 1, label: "变频模式"
            }, {
                value: 0, label: "手动模式"
            }],
            marks: {
                16: '16°C',
                // 18: '18',
                // 20: '20',
                20: '20',
                // 24: '24',
                26: '26',
                // 28: '28',
                30: '30°C',
            },
            handlePowerOperate,
            handleCentralSelect,
            handleRefresh,
            handleSlider,
            handleRules,
            handleCentralMode,
            handleCentralWindDirL,
            handleCentralWindDirT,
            handleCentralSpeed,
            handleAdd,
            handleclose,
            handleAreaCode,
            handleChangeAreaCodeEdit,
            handleclickUpdate,
            handledelete,
            handleRulesSwitch
        };
    },
};
</script>
<style lang="less" scoped>
@import "../assets/css/common.css";
@import "../assets/css/device.less";
@import "../assets/fonts/iconfont.css";

.conttbox {
    position: relative;
}

.auto-manual {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    font-size: 14px;

    .manual {
        width: 40%;
        padding-left: 20px;
    }

    &:deep(.el-input--suffix .el-input__inner) {
        // width: 100px;
        border: 0px !important;
    }
}

.container {
    position: relative;
    z-index: 99;
}

.header_back2,
.header_back,
.header_back1 {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.content_info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem 0 1.5rem 0;
    position: relative;
}

.header_back2,
.header_back,
.header_back1,
.header_back3 {
    height: 40px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.dev_boxback {
    position: absolute;
    height: 92%;
    width: 100%;
    border-radius: 20px;
    // position: absolute;
    // z-index: 9999;
    animation-name: fadenum;
    animation-duration: 2s;
    z-index: 9999;
}

.devbg {
    background-color: rgba(169, 238, 185, 0.185);
}

.devbg1 {
    background-color: rgba(96, 97, 96, 0.185);
}

@keyframes fadenum {
    0% {
        opacity: 1;
    }

    99% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.info-desc {
    width: 25%;
    display: flex;
    flex-direction: column;

    .el-icon-switch-button,
    .el-icon-picture-outline-round,
    .el-icon-refresh,
    .el-icon-key,
    .icon-icon-hongwaishuangjian,
    .el-icon-warning-outline,
    .el-icon-sunny,
    .el-icon-rank,
    .el-icon-sunset,
    .el-icon-orange,
    .el-icon-cloudy,
    .el-icon-pie-chart,
    .icon-fengxiang,
    .el-icon-s-order,
    .el-icon-finished {
        font-size: 38px;
        // box-shadow: 1px 1px 10px rgb(166 166 166);
        cursor: pointer;
    }

    div {
        margin-top: 0.5rem;
    }
}

.el-icon-finished,
.el-icon-setting,
.el-icon-s-order,
.el-icon-edit,
.el-icon-delete {
    font-size: 26px;
    color: rgb(181 187 182);
    cursor: pointer;
    margin-right: 20px;
}

.dev_box {
    // position: fixed !important;
    margin: 0 auto;
    // z-index: 999;
    left: 0;
    right: 0;
    justify-content: center;
}

.dev_box>div {
    border-radius: 20px;
    background: #fff;
}

.el-input {
    width: 215px;
}

@media screen and (max-width: 1200px) {
    .dev_box>div {
        width: 42%;
        margin-right: 1.5rem;
    }

    &:deep(.el-input) {
        width: 8.2rem;
    }
}

@media screen and (max-width: 1200px) and (min-width: 1200px) {
    .dev_box>div {
        width: 45%;
    }
}

@media screen and (min-width: 1200px) {
    .dev_box>div {
        // width: 35%;
    }
}

.all_icon {
    display: flex;
    justify-content: flex-end;
}

.el-icon-close {
    background: #6e6e6e59;
    border-radius: 360px;
    font-size: 26px;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #333;
}

&:deep(.el-input-number) {
    width: auto;
}

.roomName {
    width: auto;
}

.switchbtn {
    width: 95%;
    margin: 10px;
    float: right;
    display: flex;
    align-items: center;
    // justify-content: end;
    position: relative;
    z-index: 999;
}

.instrumentPanel {
    position: relative;
    bottom: 40px;
}

.slider-block {
    width: 70%;
    height: 24px;
    background: #F0F0F0;
    border-radius: 12px;
}

&:deep(.el-slider__runway) {
    margin: 0;
    height: 0;
}

&:deep(.el-slider__button-wrapper) {
    top: -5px;
}

&:deep(.el-slider__bar) {
    height: 24px !important;
    border-radius: 12px;
}

.slider-demo-block {
    position: relative;
    bottom: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 15px;
}

.minimumtemp {
    position: absolute;
    color: #999;
    left: 23%;
    z-index: 99;
    font-size: 12px;
}

.maximumtemp {
    position: absolute;
    color: #999;
    right: 10%;
    z-index: 99;
    font-size: 12px;
}

.content-block1 {
    width: 80%;
    height: 54px;
    border-radius: 12px;
    cursor: pointer;
}

.content-block2 {
    width: 80%;
    height: 54px;
    border-radius: 12px;
}

.content-block1>div {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

&:deep(.el-radio-button__inner) {
    padding: 12px 18px
}

.air_icon {
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.icon-box {
    position: relative;
    bottom: 30px;
}

&:deep(.el-radio-button:first-child:last-child .el-radio-button__inner) {
    border-radius: 0;
}

&:deep(.auto-manual2) {
    width: 140px !important;
    position: relative;
    z-index: 999;
    right: 20px;
    top: 20px;
}

&:deep(.el-slider__marks-text) {
    margin-top: 0
}
</style>
